<!--
 * @Description: 短视频页面
 * @Author: Kerwin
 * @Date: 2023-06-26 11:51:54
 * @LastEditTime: 2024-11-26 11:34:52
 * @LastEditors:  Please set LastEditors
-->
<template>
  <view class="container">
    <view class="head-view" fixed :style="{
      background: 'rgba(0,0,0,0)',
      paddingTop: buttonRect.top ? buttonRect.top + 'px' : '0',
      top: 0,
      zIndex: 10,
      width: '100%'
    }">
      <u-tabs :list="tabList" v-model="currentTab" bg-color="rgba(0,0,0,0)" active-color="#fff" inactive-color="#fff"
        font-size="34" @change="change"></u-tabs>
    </view>
    <c_swiper_video ref="swiperRef"></c_swiper_video>
    <!-- <hy-pop-up-ads ref="pupupAdsRef" :background="'transparent'" /> -->
    <hy-tabbar bgColor="#000"></hy-tabbar>
  </view>
</template>
<script setup lang="ts">
import { reactive, ref, watch, onMounted, nextTick } from 'vue';
import {
  onLoad,
  onShow,
  onReady,
  onHide,
  onShareAppMessage,
  onPullDownRefresh
} from '@dcloudio/uni-app'
import { storeToRefs } from 'pinia'
import { baseApi, productApi, socialApi, enumAll } from '@/api'
import { getImgFullPath, getDistance } from '@/utils/index'
import { useUserStore, useConfigStore } from '@/store'
import hyNavBarSimpler from '@/components/hy-nav-bar-simpler/index.vue'
import { sharePathFormat } from '@/common/wechat-share'
import c_tabbar from './c_tabbar.vue'
import c_loading from './c_loading.vue'
import c_swiper_video from './c_swiper_video.vue'
import { checkLoginState } from '../../utils/index';

const userStore = useUserStore()
const configStore = useConfigStore()
const { hasLogin, userInfo } = storeToRefs(userStore)
const buttonRect = ref({})
// #ifdef MP-WEIXIN
buttonRect.value = wx.getMenuButtonBoundingClientRect()
// #endif
const tabList = [
  {
    name: '热门'
  },
  {
    name: '关注'
  }
]
const currentTab = ref(0)
async function change(index: any) {
  currentTab.value = index
  if (index === 1) {
    // 获取关注列表（需登录）

  } else {

  }
}
const type = ref('default')
const swiperRef = ref()
// 弹窗广告
const pupupAdsRef = ref()
nextTick(() => {
  pupupAdsRef.value.load()
})

onLoad((option) => {
  type.value = option?.type
  if (option?.dynamicId) {
    const dynamicId = option?.dynamicId
    nextTick(() => {
      swiperRef.value.getDynamicList(dynamicId)
    })
  }
})

// onShareAppMessage((_res) => {
//   const dynamic = swiperList.value[swiperCurrent.value] || {}
//   return {
//     title: dynamic.name || '黑银生活短视频',
//     content: dynamic.content,
//     desc: dynamic.content,
//     imageUrl: getImgFullPath(dynamic.previewImage) || '',
//     path: sharePathFormat({ dynamicId: dynamic.id })
//   }
// })
onPullDownRefresh(() => {
  console.log('refresh')
  if (['preview', 'viewSingleUser'].includes(type.value)) return
  setTimeout(() => {
    uni.stopPullDownRefresh()
  }, 1000)
})
</script>


<style lang="scss" scoped>
.container {
  height: calc(100vh - 102rpx);
  background-color: #000;
  display: flex;
  flex-direction: column;

  .swiper {
    width: 100%;
    flex: 1;

    .swiperItem {
      .video {
        width: 100%;
        height: 100%;
      }

      .play {
        position: absolute;
        width: 152rpx;
        height: 152rpx;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        opacity: 0.6;
        z-index: 2;
      }
    }
  }

  .sideBar {
    position: absolute;
    right: 30rpx;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    z-index: 1;

    .avatar {
      border: 2px solid #fff;
      border-radius: 50%;
      position: relative;
      width: 86rpx;
      height: 86rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 40rpx;

      .icon {
        position: absolute;
        left: 50%;
        bottom: 0;
        color: red;
        z-index: 1;
        transform: translateX(-50%) translateY(40%);
      }
    }

    .action {
      display: flex;
      flex-direction: column;
      font-size: 20rpx;
      text-align: center;
      margin-top: 30rpx;
      position: relative;

      .iconfont {
        font-size: 70rpx;
        opacity: 0.85;
        text-shadow: rgba(0, 0, 0, 0.6) 1px 1px 0px;
      }

      .num {
        text-shadow: rgba(0, 0, 0, 0.6) 1px 1px 1px;
      }

      .hy-icon-yidianzan {
        &.is-active {
          animation: heartbeat 1s;
          color: red;
        }
      }

      .shareBtn {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        z-index: 1;
      }

      @keyframes heartbeat {
        0% {
          transform: scale(1);
        }

        10% {
          transform: scale(1.25);
        }

        100% {
          transform: scale(1);
        }
      }
    }
  }

  .footer {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    z-index: 1;

    &.showControl {
      bottom: 50rpx;
    }

    .top {
      padding: 0 30rpx 20rpx 30rpx;
      box-sizing: border-box;
      background: linear-gradient(180deg,
          rgba(0, 0, 0, 0) 0%,
          rgba(0, 0, 0, 0.06) 46%,
          rgba(0, 0, 0, 0.08) 100%);

      .labelBox {
        color: #b3b3b3;
        font-size: 24rpx;
      }

      .name {
        color: #ffffff;
        font-size: 30rpx;
        font-weight: bold;
        margin-top: 16rpx;
      }

      .textBox {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        margin-top: 16rpx;
        color: #ffffff;

        &.tit {
          font-weight: bold;
          font-size: 28rpx;
        }

        .p {
          max-width: 525rpx;
          font-size: 28rpx;
          line-height: normal;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          word-break: break-all;
        }

        .btn {
          color: #ffffff;
          font-size: 26rpx;
          line-height: normal;
        }
      }

      .openBox {
        margin-top: 16rpx;

        .p {
          display: block;
          color: #ffffff;
          font-size: 26rpx;
          line-height: normal;
          word-break: break-all;
          white-space: pre-line;
          word-wrap: break-word;
        }

        .btn {
          color: #ffffff;
          font-size: 26rpx;
          line-height: normal;
          display: block;
          text-align: right;
        }
      }
    }

    .bottom {
      background-color: #fff;
      padding: 20rpx 0;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .left {
        padding-left: 30rpx;
        display: flex;
        justify-content: center;
        align-items: center;

        .pic {
          width: 48rpx;
          height: 48rpx;
          margin-right: 10rpx;
        }

        .num {
          color: #636366;
          font-size: 24rpx;
        }
      }

      .right {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        width: 500rpx;
        box-sizing: border-box;
        padding-right: 30rpx;

        .box {
          position: relative;
          margin-right: 20rpx;
          overflow: visible;

          .btn {
            display: block;
            width: 130rpx;
            height: 100%;
            background-color: rgba(0, 0, 0, 0);
            padding: 0;
            margin: 0;
            text-align: center;
            line-height: normal;

            .pic {
              width: 40rpx;
              height: 40rpx;
              display: inline-block;
              vertical-align: middle;
              position: relative;
              z-index: 2;
              margin-right: 8rpx;
            }

            .text {
              vertical-align: middle;
              display: inline-block;
              color: #636366;
              font-size: 24rpx;
              height: 40rpx;
              line-height: 40rpx;
            }
          }

          .wechat {
            width: 174rpx;

            .pic {
              width: 174rpx;
              height: 56rpx;
            }
          }

          .btn:after {
            border: none;
          }
        }

        .box:last-of-type {
          margin-right: 0;
        }
      }
    }
  }
}
</style>
